<template>
    <div class="booking">
        <div class="header">
          <img class="return_img" src="@/assets/Return.png" style="width:.23rem;height:.4rem;" v-on:click="back()"> 代客预定
          <span class="cancel"><img class="img" src="@/assets/add.png" style="width:.34rem;height:.34rem;" v-on:click="add()"></span>
        </div>
        <div class="booking_top">
            <i class="iconfont icon-sousuo"></i>
            <input type="text" v-model="value" v-on:input="getResult(value)" placeholder="搜索">
        </div>
        <load-more :tip="$t('正在加载')" v-show="show2"></load-more>
        <div>
            <tab>
                <tab-item selected @on-item-click="onItemClick(1)">进行中</tab-item>
                <tab-item @on-item-click="onItemClick(2)">已完成</tab-item>
                <tab-item @on-item-click="onItemClick(3)">已失效</tab-item>
            </tab>
        </div>
        <scroller use-pullup :pullup-config="pullupDefaultConfig" @on-pullup-loading="loadMore"
            lock-x  ref="scrollerBottom" height="-140">
          <ul>                  
            <li class="booking_center" @click="detail(item)" v-for="(item,index) in orderList" :key="index" v-show="orderList.length!=0">            
              <p class="time">{{ item.createTime }}</p>
              <div class="booking_center_title">
                  <p class="name" v-if="item.replaceType==1">散客</p>
                  <p class="name" v-if="item.replaceType==2">{{ item.agreementName }}</p>
                  <span class="check" v-if="item.state == 0">未支付</span>
                  <span class="check" v-if="item.state == 1">待入住</span>
                  <span class="check" v-if="item.state == 2">已入住</span>
                  <span class="check" v-if="item.state == 3">已取消</span>
                  <span class="check" v-if="item.state == 4">退房</span>
                  <span class="check" v-if="item.state == 5">已失效</span>
                  <span class="check" v-if="item.state == 6">已评价</span>
                  <span class="check" v-if="item.state == 7">待确认(道旅订单)</span>
              </div>
              <div class="booking_center_cont">
                  <div class="booking_left">
                      <img :src="item.imgUrl+item.url.split(';')[0]" alt="">
                  </div>
                  <div class="booking_right">
                      <p class="booking_right_t">{{ item.roomName }}({{item.breakfast}})<span class="money">￥{{ item.sellPrice }}</span></p>
                      <p class="booking_right_text">{{ item.liveTime }}至{{ item.leaveTime }} <span style="margin-left:.39rem">{{ item.bookingRoomsNum }}</span></p>
                      <p class="booking_right_text">订单号：{{ item.orderNum }}</p>
                      <p class="booking_right_text">入住人：{{ item.stayPerson }}</p>
                  </div>
              </div>
            </li>
          </ul> 
          <div v-show="orderList.length==0" style="text-align:center;margin-top:1rem;">
            <img src="@/assets/no_data.png" alt="" style="width:3rem">
          </div> 
        </scroller>        
        <div v-transfer-dom>
          <loading :show="show" text=""></loading>
        </div>
    </div>
</template>

<script>
import { getReserveOrderValet } from "@/service/home.js";
import AxiosIns from "@/service/axiosConfig.js";
import {
  Loading,
  LoadMore,
  Tab,
  TabItem,
  Scroller,
  TransferDomDirective as TransferDom
} from "vux";
var pullupDefaultConfig = {
  content: "上拉加载更多",
  pullUpHeight: 60,
  height: 40,
  autoRefresh: false,
  upContent: "上拉加载更多",
  downContent: "正在加载中。。。",
  loadingContent: "没有更多了",
  clsPrefix: "xs-plugin-pullup-"
};
export default {
  directives: {
    TransferDom
  },
  components: {
    Loading,
    LoadMore,
    Tab,
    TabItem,
    Scroller
  },
  data() {
    return {
      results: [],
      value: "",
      show: false,
      show2: false,
      index: 0,
      pageNum: 1,
      pageSize: 10,
      type: 1,
      userId: localStorage.getItem("id"),
      IosUserId: localStorage.getItem("IosUserId"),
      orderList: [],
      imgUrl: "",
      token: sessionStorage.token,
      state_text: "",
      pullupDefaultConfig: pullupDefaultConfig,
      total: "",
      Ios: true
    };
  },
  mounted() {
    this._setToken();
    this._getReserveOrderValet();
    this.$nextTick(() => {
      this.$refs.scrollerBottom.reset({ top: 0 });
    });
  },
  methods: {
    _setToken() {
      let iosToken = this.$route.query.iosToken;
      let userId = this.$route.query.userId;
      let ioscompanyId = this.$route.query.companyId;
      let hotelName = this.$route.query.hotelName;
      if (userId) {
        this.userId = userId;
      }
      if (iosToken) {
        AxiosIns.defaults.params.token = iosToken;
        sessionStorage.setItem("token", iosToken);
        localStorage.setItem("ioscompanyId", ioscompanyId);
        localStorage.setItem("userId", userId);
        localStorage.setItem("hotelName", hotelName);
        localStorage.setItem("Ios", this.Ios);
        console.log(localStorage.getItem("Ios"));
      }
    },
    // 获取代客预定列表数据
    _getReserveOrderValet() {
      var data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        type: this.type,
        userId: this.userId
      };
      getReserveOrderValet(data).then(res => {
        this.total = res.data.total;
        var list = res.data.orderList;
        list.forEach(item => {
          this.orderList.push(item);
        });
        if (this.orderList.length != 0) {
          this.imgUrl = res.data.imgUrl;
        }
        this.list_length = this.orderList.length;
        this.$nextTick(() => {
          this.$refs.scrollerBottom.reset();
        });
      });
    },
    getResult(value) {
      this.show2 = true;
      setTimeout(() => {
        this.show2 = false;
      }, 1000);
    },
    onItemClick(index) {
      this.pageNum = 1;
      this.orderList = [];
      this.type = index;
      this.show = true;
      setTimeout(() => {
        this.show = false;
        this._getReserveOrderValet();
      }, 2000);
    },
    detail(item) {
      localStorage.setItem("orderId", item.id);
      localStorage.setItem("type", this.type);
      var imgUrl = this.imgUrl + item.url.split(";")[0];
      localStorage.setItem("imgUrl", imgUrl);
      window.location.href = "/my/SubstituteBooking/detail";
    },
    back() {
      let iosToken = this.$route.query.iosToken;
      let Ios = localStorage.getItem("Ios");
      if (iosToken || Ios) {
        returnAction();
      }
      this.$router.push({ path: "/index" });
    },
    loadMore() {
      this.pageNum = parseInt(this.pageNum + 1);

      if (this.list_length < this.total) {
        this._getReserveOrderValet();
        this.$refs.scrollerBottom.donePullup();
      }
    },
    add() {
      window.location.href = "/my/SubstituteBooking/add";
    }
  }
};
</script>
<style  scoped lang="less">
.booking {
  .cancel {
    position: absolute;
    top: 0.26rem;
    right: 0.25rem;
    height: 0.28rem;
    line-height: 0.28rem;
    font-size: 0.3rem;
    color: rgba(0, 0, 0, 1);
  }
  .booking_top {
    margin: 0.2rem 0;
    position: relative;
    .iconfont {
      position: absolute;
      top: 0.07rem;
      left: 0.4rem;
      color: #999;
    }
    input {
      width: 7rem;
      height: 0.6rem;
      background: rgba(255, 255, 255, 1);
      border-radius: 0.3rem;
      color: #000000;
      border: none;
      outline: medium;
      padding: 10px 30px;
      margin-left: 0.25rem;
    }
  }
  .booking_center {
    .time {
      width: 2.8rem;
      height: 0.5rem;
      line-height: 0.5rem;
      font-size: 0.24rem;
      font-family: PingFang-SC-Medium;
      background: rgba(209, 209, 209, 1);
      border-radius: 0.25rem;
      color: #fff;
      margin: 0.3rem auto 0.2rem auto;
      text-align: center;
    }
    .booking_center_title {
      width: 7.5rem;
      height: 0.9rem;
      background: rgba(255, 255, 255, 1);
      border-bottom: 1px solid rgba(243, 243, 243, 1);
      .name {
        // width: 0.6rem;
        height: 0.28rem;
        line-height: 0.28rem;
        font-size: 0.3rem;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: rgba(44, 44, 44, 1);
        float: left;
        margin: 0.31rem 0 0.31rem 0.25rem;
      }
      .check {
        height: 0.28rem;
        font-size: 0.3rem;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: rgba(161, 161, 161, 1);
        line-height: 0.28rem;
        float: right;
        margin: 0.31rem 0.25rem 0.31rem 0;
      }
    }
    .booking_center_cont {
      width: 7.5rem;
      height: 1.9rem;
      background: rgba(255, 255, 255, 1);
      .booking_left {
        float: left;
        margin: 0.2rem 0.2rem 0.2rem 0.26rem;
        img {
          width: 1.5rem;
          height: 1.5rem;
          background: rgba(209, 209, 209, 1);
          border-radius: 10px;
        }
      }
      .booking_right {
        width: 5.54rem;
        float: left;
        margin: 0.28rem 0 0.25rem 0;
        .booking_right_t {
          height: 0.29rem;
          font-size: 0.3rem;
          color: rgba(44, 44, 44, 1);
          line-height: 0.29rem;
          .money {
            color: #fd382f;
            float: right;
            margin-right: 0.25rem;
          }
        }
        .booking_right_text {
          margin-top: 0.13rem;
          height: 0.23rem;
          font-size: 0.24rem;
          line-height: 0.23rem;
          color: rgba(161, 161, 161, 1);
        }
      }
    }
  }
  .vux-tab {
    .vux-tab-selected {
      color: #872a91 !important;
      border-bottom: 2px solid #872a91 !important;
    }
  }
}
</style>
